<template>
  <el-card style="margin-top: 10px;height: 80px;">
      <el-form :inline="true"  class="demo-form-inline">
    
      <el-form-item label="商品名称" style="width: 230px;">
        <el-select v-model="page.nid" placeholder="请选择商品名称" clearable>
          <el-option v-for="item in goodnamelist" :label="item.nName" :value="item.nId" />
        </el-select>
      </el-form-item>

      <el-form-item label="生产批次" style="width: 230px;">
        <el-input  placeholder="请输入" clearable />
      </el-form-item>

      <el-form-item label="保质期" style="width: 230px;">
        <el-input  placeholder="请输入" clearable />
      </el-form-item>

      <el-form-item label="生产许可证" style="width: 230px;">
        <el-input  placeholder="请输入" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="small" @click="getGoods()">查询</el-button>
        <el-button type="primary" size="small" @click="resetGoods()">重置</el-button>
        <el-button type="info" size="small" @click="exportlogic.isopen=true">导出溯源码</el-button>
      </el-form-item>
    </el-form>
  </el-card>

    <el-card style="margin-top: 10px;">
        <el-button round style="margin-bottom: 10px;" type="success" @click="open()">新增</el-button>
        <el-button round style="margin-bottom: 10px;" type="danger" @click="deleteall()">批量删除</el-button>
        <el-table ref="multipleTableRef"
          :data="tableData"
          row-key="rId"
          style="width: 100%;height: 400px;"
          @selection-change="handleSelectionChange"
        >  <!-- @selection-change="handleSelectionChange"  -->
          <el-table-column type="selection"  width="55" />
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="nName" label="商品名称" width="100"/>
            <el-table-column prop="gBatch" label="生产批次"width="100"/>
            <el-table-column prop="gDay" label="保质期(天)" width="100" />
               
            <el-table-column prop="gGeneration" label="生产许可证号" width="180"/>
            <el-table-column prop="gCompany" label="生产企业" width="210"/>
            <el-table-column prop="gInformation" label="信息完善度" width="100">
                <template #default="spoce">
                    <span v-if="spoce.row.gInformation == '100'" style="color: green;">{{ spoce.row.gInformation }}%</span>
                    <span v-if="spoce.row.gInformation != '100'" style="color: red;">{{ spoce.row.gInformation }}%</span>
                </template>
                </el-table-column>
            <el-table-column label="操作" fixed="right"  min-width="180">
                <template v-slot="scope">
                    <el-button type="danger"  size="small"  @click="deletegood(scope.row.rId)">删除</el-button>
                    <el-button type="primary" size="small"  @click="open(scope.row)">编辑</el-button>
                    <el-button type="success" size="small"  @click="jump(scope.row)">详情</el-button>
                    <el-button type="info" size="small"  @click="exportlogic.isopen=true">导出溯源码</el-button>
                </template>
            </el-table-column>
        </el-table>
      
  </el-card>
  <!-- 分页 -->
  <el-card style="margin-top: 10px;">
      <el-pagination
            style="margin-top: 20px;margin-left: 290px;"
            v-model:current-page="page.PageIndex"
            v-model:page-size="page.PageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount"
        />
        
  </el-card>
 <!-- 弹框新增   -->
  <el-dialog v-model="goodlogic.isopen" title="基本信息" width="700">
    <el-form style="width: 400px;">
      
      <el-form-item label="商品名称:">
        <el-select v-model="goodform.nId" placeholder="请选择商品名称" >
          <el-option v-for="item in goodnamelist" :label="item.nName" :value="item.nId" />
        </el-select>
      </el-form-item>

      <el-form-item label="生产批次:">
        <el-input v-model="goodform.gBatch"  />
      </el-form-item>

      <el-form-item label="保质期(天):">
        <el-input v-model="goodform.gDay"  />
      </el-form-item>

      <el-form-item label="生产许可证号:">
        <el-input v-model="goodform.gGeneration"  />
      </el-form-item>

      <el-form-item label="生产企业:">
        <el-input v-model="goodform.gCompany"  />
      </el-form-item>

      <el-form-item label="信息完善度:">
        <el-input v-model="goodform.gInformation"  />
      </el-form-item>

      <el-form-item label="封面图:">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:5028/api/Student/Upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
                <img v-if="goodform.gImg" :src="goodform.gImg" class="avatar" width="50" height="50" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
      </el-form-item>
      <el-form-item label="产品检验报告:">
            <el-upload
              v-model:file-list="fileList"
              action="http://localhost:5028/api/Student/Upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
        
        
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 80px;height: 80px;"/>
            </el-dialog>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="goodlogic.isopen = false" >取消</el-button>
        <el-button type="primary" @click="creategood" >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 弹框导出  -->
  <el-dialog v-model="exportlogic.isopen" title="导出" width="400">
    <el-form style="width: 300px;">
      
      <el-form-item label="导出数量:">
        <el-input v-model="exportinfo.PageSize"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="exportlogic.isopen = false" >取消</el-button>
        <el-button type="primary" @click="exportfile" >
          导出
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script lang="ts" setup>
import { reactive,ref,onMounted,watch } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import { useRoute,useRouter } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const router = useRouter()

import type { TableInstance } from 'element-plus'


const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref([])

const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}

//批量逻辑删除
const deleteall=()=>{
  ElMessageBox.confirm(
    '确认删除这'+multipleSelection.value.length+'条商品信息吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(multipleSelection.value.map((x:any)=>x.rId).toString());
        axios({
            url:"http://localhost:5028/api/Goods/UpdateGoodAll",
            method:"get",
            params:{
              id:multipleSelection.value.map((x:any)=>x.rId).toString(),
            }
        })
        .then(res=>{
          
          
            
            if(res.data.code==100)
            {
                getGoods();
                ElMessage.success(res.data.message);
            }
            else{
                ElMessage.error(res.data.message);
            }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

//导出表单
const exportinfo=reactive({
  PageSize:null,
})

//商品弹框
const exportlogic=reactive({
    isopen:false,
})

//导出
const exportfile = ()=>{
  location.href=`http://localhost:5028/api/Goods/ExportFile?PageIndex=${page.PageIndex}&PageSize=${exportinfo.PageSize}`;
}
//----------------------------------------多上传--------------------------------------

import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([
 
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
//--------------------------------------------------------------------------------------------------------------

//跳转至详情页面
const jump=(row:any)=>{
  router.push({
    path:"/Fail",
    query:{
        creator     : row.creator,
        createTime  : row.createTime,
        updater     : row.updater,
        updateTime  : row.updateTime,
        rId         : row.rId,
        nId         : row.nId,
        nName       : row.nName,
        gBatch      : row.gBatch,
        gDay        : row.gDay,
        gGeneration : row.gGeneration,
        gCompany    : row.gCompany,
        gInformation: row.gInformation,
        gImg        : row.gImg,
        isDelete    : row.isDelete,
        productImg    : row.productImg,
    }
  })
}


//重置查询条件
const resetGoods=()=>{
  page.nid=null;
}

//删除商品信息请求
const deletegood=(id:any)=>{

   ElMessageBox.confirm(
    '确认删除该商品信息吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        axios({
            url:"http://localhost:5028/api/Goods/DeleteGood",
            method:"put",
            params:{
              id:id,
            }
        })
        .then(res=>{
            
            if(res.data.code==100)
            {
                getGoods();
                ElMessage.success(res.data.message);
            }
            else{
                ElMessage.error(res.data.message);
            }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
   
}


//------------------------------保存商品---------------------------------

//保存商品信息
const creategood=()=>{
   if(goodlogic.isadd==1)//添加
   {
        goodform.productImg=fileList.value.map(x=>x.response).toString();
        
       axios({
            url:"http://localhost:5028/api/Goods/CreateGood",
            method:"post",
            data:goodform
        })
        .then(res=>{
            
            if(res.data.code==100)
            {
                getGoods();
                goodlogic.isopen=false;
                ElMessage.success(res.data.message);
                
            }
            else{
                ElMessage.error(res.data.message);
            }
        })
   }
   else //修改
   {
    goodform.productImg=fileList.value.map(x=>x.response).toString();
      goodform.updater=localStorage.getItem("UserName");
       axios({
              url:"http://localhost:5028/api/Goods/UpdateGood",
              method:"put",
              data:goodform
          })
          .then(res=>{
              
              if(res.data.code==100)
              {
                  getGoods();
                  goodlogic.isopen=false;
                  ElMessage.success(res.data.message);
                 
              }
              else{
                  ElMessage.error(res.data.message);
              }
          })
   }
}

//------------------------------上传---------------------------------

//#region 上传

const handleAvatarSuccess=(imageUrl:any)=>{
    goodform.gImg=imageUrl;
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('只能选择JPG类型!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不得超过2MB!')
    return false
  }
  return true
}

//#endregion

//------------------------------添加----------------------------------------

//打开商品弹框
const open=(row?:any)=>{
  goodform.rId=0;
  goodform.nId=null;
  goodform.nName="";
  goodform.gBatch="";
  goodform.gDay=null;
  goodform.gGeneration="";
  goodform.gCompany="";
  goodform.gInformation=null;
  goodform.gImg="";
  goodform.productImg="";
  goodlogic.isopen=true;
  getGoodNames();
  if(row==null)//添加
  {
      goodlogic.isadd=1;
  }
  else{
    
      goodlogic.isadd=2;
      goodform.rId=row.rId;
      goodform.nId=row.nId;
      goodform.gBatch=row.gBatch;
      goodform.gDay=row.gDay;
      goodform.gGeneration=row.gGeneration;
      goodform.gCompany=row.gCompany;
      goodform.gInformation=row.gInformation;
      goodform.gImg=row.gImg;
      goodform.productImg=row.productImg;
  }
    
}

//商品弹框
const goodlogic=reactive({
    title:"",
    isopen:false,
    isadd:0,
})

//商品数据
const goodform :any=reactive({
  creator     : localStorage.getItem("UserName"),
  createTime  : "2025-10-20T01:34:55.564Z",
  updater     : "1",
  updateTime  : "2025-10-20T01:34:55.564Z",
  rId         : 0,
  nId         : null,
  nName       : "",
  gBatch      : "",
  gDay        : null,
  gGeneration : "",
  gCompany    : "",
  gInformation: null,
  gImg        : "",
  productImg:"",
  isDelete    : false
})

//------------------------------商品显示---------------------------------------

//分页参数
const page = reactive({
    PageIndex:1,
    PageSize:10,
    totalCount:0,
    totalPage:0,
    nid:null,
})

//商铺数据
const tableData=ref([])

//商品数据请求
const getGoods=()=>{
    axios({
        url:"http://localhost:5028/api/Goods/GetGoodAll",
        method:"get",
        params:{
            id:page.nid,
            PageIndex:page.PageIndex,
            PageSize:page.PageSize,
        }
    })
    .then(res=>{
        tableData.value=res.data.pageData;
        page.totalCount=res.data.countList;
        page.totalPage=res.data.pageCount;
    })
}

//------------------------------商品名称---------------------------------------
//商品名称数据
const goodnamelist:any=ref([])
//商品名称数据请求
const getGoodNames=()=>{
    axios({
        url:"http://localhost:5028/api/Goods/GetGoodNameAll",
        method:"get",
    })
    .then(res=>{
        goodnamelist.value=res.data.data;
    })
}




onMounted(()=>{
    getGoods();
    getGoodNames();
})
watch(page,()=>{
    getGoods();
})
</script>

<style scoped>


.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  text-align: center;
}
</style>



